<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #change,
        #tb {
            margin: 0;
            padding: 0;
        }
        
        #change li {
            list-style-type: none;
        }
        
        #tb tr th a {
            text-decoration: none;
            color: powderblue;
        }
        
        #change,
        #tb {
            width: 500px;
            height: 25px;
            margin: 0 auto;
            clear: both;
        }
        
        #change li {
            float: left;
            margin: 10px 10px 10px 0;
            width: 5px;
            height: 5px;
            border-width: 5px;
            border-style: solid;
        }
        
        #red {
            border-color: blue;
            background: blue;
        }
        
        #green {
            border: black;
            background: black;
        }
        
        #black {
            border: purple;
            background: purple;
        }
        
        #change li.current {
            background: #fff !important;
        }
        
        #tb {
            border-collapse: collapse;
        }
        
        #tb tr th {
            border: 1px width solid;
            font-size: 11px;
        }
        
        #tb tr th a:hover {
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript">
        function huanse(elem, attr, value) {
            elem.style[attr] = value;
        }
        window.onload = function() {
            var oLi = document.getElementsByTagName("li");
            var an = document.getElementById("bd");
            var oTb = document.getElementById("tb");
            var xin = ["background"];
            var ping = ["blue", "black", "purple"];
            var f = ["blue", "black", "purple"];
            for (var i = 0; i < oLi.length; i++) {
                oLi[i].index = i;
                oLi[i].onclick = function() {
                    for (var x in oLi) oLi[x].className = "";
                    this.className = "current";

                    if (this.index == oLi.length - 1) {
                        huanse(an, xin[0], ping[2]);
                        huanse(oTb, xin[0], f[2]);
                    } else {
                        huanse(an, xin[0], ping[this.index]);
                        huanse(an, xin[0], f[this.index]);
                    }


                }
            }
        }
    </script>
    <title></title>
</head>

<body id="bd">
    <ul id="change">
        <li id="red" title="pink"></li>
        <li id="green" name="current" title="yellow"></li>
        <li id="black" title="plum"></li>
    </ul>
    <table id="tb">
        <tr>

            <th><a href="#">安馨萍</a></th>
            <th><a href="#">安馨萍</a></th>
            <th><a href="#">安馨萍</a></th>
            <th><a href="#">安馨萍</a></th>
            <th><a href="#">安馨萍</a></th>
        </tr>
    </table>
</body>

</html>